<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能客服系统</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'chat/css/style.css' %}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <div class="header-content">
                <div class="avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="header-info">
                    <h1>智能客服助手</h1>
                    <p class="status" id="status">在线</p>
                </div>
                <div class="header-actions">
                    <button class="btn-clear" id="clearBtn" title="清除对话">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="chat-messages" id="chatMessages">
            <div class="message ai-message">
                <div class="message-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="message-content">
                    <p>您好！我是智能客服助手，很高兴为您服务。请问有什么可以帮助您的吗？</p>
                    <span class="message-time" id="welcomeTime"></span>
                </div>
            </div>
        </div>

        <div class="chat-input-container">
            <div class="chat-input">
                <textarea 
                    id="messageInput" 
                    placeholder="请输入您的问题..." 
                    rows="1"
                    maxlength="1000"
                ></textarea>
                <button id="sendBtn" class="send-btn">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
            <div class="input-footer">
                <span class="char-count">
                    <span id="charCount">0</span>/1000
                </span>
                <span class="tip">按 Ctrl+Enter 发送</span>
            </div>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-spinner">
            <i class="fas fa-circle-notch fa-spin"></i>
            <p>AI正在思考中...</p>
        </div>
    </div>

    <script src="{% static 'chat/js/chat.js' %}"></script>
</body>
</html>